<template>
  <div class="orderPrint">
      <h1 class="title">胡四批发部送货单</h1>
      <p class="getName">
        <span>收货人：{{orderDetail.user.name}}</span>
        <span>联系电话:{{orderDetail.user.phone}}</span>
      </p>
      <p class="getName">
        <span>时间:{{orderDetail.time}}</span>
        <span>是否付款:{{orderDetail.status ? '已付款' : '未付款' }}</span>
      </p>
      <el-table :data="orderDetail.orderData" :border="true">
        <el-table-column property="goodsName" label="商品"></el-table-column>
        <el-table-column property="goodsPrice" label="单价"></el-table-column>
        <el-table-column property="goodsNum" label="数量"></el-table-column>
        <el-table-column property="goodsTotal" label="总计"></el-table-column>
      </el-table>
  </div>
</template>

<script>
export default {
  name: "orderPrint",
  data() {
    return {
      orderDetail: {
        status:0,
        time:'2018-4-20',
        user: {
          name: "家园家居红红烧烤摊",
          phone: 13888888888
        },
        orderData: [
          {
            goodsId: 0,
            goodsName: "中华烟",
            goodsNum: 10,
            goodsPrice: 455,
            goodsTotal: 4550
          },
          {
            goodsId: 1,
            goodsName: "雪碧",
            goodsNum: 15,
            goodsPrice: 50,
            goodsTotal: 750
          },
          {
            goodsId: 0,
            goodsName: "大面包",
            goodsNum: 20,
            goodsPrice: 2,
            goodsTotal: 40
          },
          {
            goodsId: 0,
            goodsName: "大面包",
            goodsNum: 20,
            goodsPrice: 2,
            goodsTotal: 40
          },
          {
            goodsId: 0,
            goodsName: "大面包",
            goodsNum: 20,
            goodsPrice: 2,
            goodsTotal: 40
          },
          {
            goodsId: 0,
            goodsName: "大面包",
            goodsNum: 20,
            goodsPrice: 2,
            goodsTotal: 40
          },
          {
            goodsId: 0,
            goodsName: "大面包",
            goodsNum: 20,
            goodsPrice: 2,
            goodsTotal: 40
          },
          {
            goodsId: 0,
            goodsName: "大面包",
            goodsNum: 20,
            goodsPrice: 2,
            goodsTotal: 40
          },
          {
            goodsId: 0,
            goodsName: "大面包",
            goodsNum: 20,
            goodsPrice: 2,
            goodsTotal: 40
          },
          {
            goodsId: 0,
            goodsName: "大面包",
            goodsNum: 20,
            goodsPrice: 2,
            goodsTotal: 40
          },
          {
            goodsId: 0,
            goodsName: "大面包",
            goodsNum: 20,
            goodsPrice: 2,
            goodsTotal: 40
          },
          {
            goodsId: 0,
            goodsName: "大面包",
            goodsNum: 20,
            goodsPrice: 2,
            goodsTotal: 40
          }
        ]
      }
    };
  },
  created() {
    setTimeout(function() {
      window.print()
    }, 1e2);
  }
};
</script>

<style lang="scss">
.cell {
    height: 40px;
  }
.title {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 29px;
}
.getName {
  text-align: center;
  font-size: 28px;
  span:nth-child(1) {
    padding-right: 20px;
  }
  span:nth-child(2) {
    padding-left: 20px;
  }
  margin-bottom: 30px;
}
.el-table {
  width: 80%;
  margin: 10px auto;
  font-size: 30px;
  .el-table__row {
    height: 40px;
    td {
      height: inherit;
    }
  }
}
</style>
